<template>
  <div>
    <div class="tableTitle">
      我的电表:{{ state.meterId }} 当前状态:{{
        showSplit == 0 ? "断开" : "合闸"
      }}
    </div>
    <div class="tablebox">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="margin: 0 auto">
                <div id="meter1" style="width: 700px; height: 400px" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="margin: 0 auto">
                <div id="meter2" style="width: 700px; height: 400px" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="width: 800px; height: 300px">
                <div id="elecMeter1" style="width: 700px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="width: 800px; height: 300px">
                <div id="elecMeter2" style="width: 700px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="width: 800px; height: 300px">
                <div id="elecMeter3" style="width: 700px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-body">
              <div style="width: 800px; height: 300px">
                <div id="elecMeter4" style="width: 700px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="padding-top: 10px; text-align: center">
        <el-button
          type="primary"
          @click="switchSplit1()"
          v-loading="isloading1"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >合闸</el-button
        >
        <el-button
          type="primary"
          @click="switchSplit0()"
          v-loading="isloading0"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >分闸</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getElecMeterLog, switchSplitHelp } from "@/api/userCenter";
export default {
  data() {
    return {
      timer: null,
      oldMeterId: null,
      showSplit: undefined,
      isloading0: false,
      isloading1: false,
      form: {
        name: "",
        region: "buyer",
        time: undefined,
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        dateFormatList: "yyyy-MM-dd",
        meter: {
          elec_meter_id: "",
          ef: undefined,
          er: undefined,
        },
      },
      state: {
        //创建响应式数据对象和相关数据
        meterId: null,
        meter1: 0,
        meter2: 0,
        data1: [],
        data2: [],
        data3: [],
        data4: [],
      },
    };
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const chart1 = this.$echarts.init(document.getElementById("meter1"));
      const chart2 = this.$echarts.init(document.getElementById("meter2"));
      const myChart1 = this.$echarts.init(
        document.getElementById("elecMeter1"),
        "dark"
      );
      const myChart2 = this.$echarts.init(
        document.getElementById("elecMeter2"),
        "dark"
      );
      const myChart3 = this.$echarts.init(
        document.getElementById("elecMeter3"),
        "dark"
      );
      const myChart4 = this.$echarts.init(
        document.getElementById("elecMeter4"),
        "dark"
      );
      // 指定图表的配置项和数据
      const meter1 = {
        title: {
          text: "总电量",
          textStyle: {
            //文字颜色
            color: "#ffffff",
          },
        },
        series: [
          {
            max: 10,
            type: "gauge",
            axisLine: {
              lineStyle: {
                // 表盘样式
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              // 指针
              width: 7,
              length: "50%",
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              // 刻度样式
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              // 分割线
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              // 表盘数字
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              // 中间数字样式
              valueAnimation: true,
              formatter: "{value} kWh",
              color: "auto",
              distance: 30,
              fontSize: 20,
            },
            data: [
              {
                value: this.state.meter1,
              },
            ],
          },
        ],
      };
      const meter2 = {
        title: {
          text: "正向电量",
          textStyle: {
            //文字颜色
            color: "#ffffff",
          },
        },
        series: [
          {
            max: 10,
            type: "gauge",
            axisLine: {
              lineStyle: {
                // 表盘样式
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              // 指针
              width: 7,
              length: "50%",
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              // 刻度样式
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              // 分割线
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              // 表盘数字
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              // 中间数字样式
              valueAnimation: true,
              formatter: "{value} kWh",
              color: "auto",
              distance: 30,
              fontSize: 20,
            },
            data: [
              {
                value: this.state.meter2,
              },
            ],
          },
        ],
      };

      const meterOption1 = {
        title: {
          text: "电压",
        },
        name: "V",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电压"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "秒",
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 60 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "V",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "电压",
            data: this.state.data1,
            type: "line",
            color: "#EE82EE",
          },
        ],
      };
      const meterOption2 = {
        title: {
          text: "电流",
        },
        name: "A",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电流"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "秒",
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 60 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "A",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "电流",
            data: this.state.data2,
            type: "line",
            color: "#7FFFD4",
          },
        ],
      };
      const meterOption3 = {
        title: {
          text: "瞬时有功",
        },
        name: "瞬时有功",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["瞬时有功"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "秒",
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 60 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "W",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "瞬时有功",
            data: this.state.data3,
            type: "line",
            color: "#00BFFF",
          },
        ],
      };
      // 指定图表的配置项和数据
      const meterOption4 = {
        title: {
          text: "功率因数",
        },
        name: "功率因数",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["功率因数"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: "秒",
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 60 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "功率因数",
            data: this.state.data4,
            type: "line",
            color: "#f8bd0b",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      chart1.setOption(meter1);
      chart2.setOption(meter2);
      myChart1.setOption(meterOption1);
      myChart2.setOption(meterOption2);
      myChart3.setOption(meterOption3);
      myChart4.setOption(meterOption4);
    },
    timerHelper() {
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      this.getElecMeter();
      this.timer = setInterval(() => {
        if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
          this.clearTimer();
          return;
        }
        this.getElecMeter();
      }, 1000); // 一秒执行一次
    },
    getElecMeter() {
      getElecMeterLog().then((res) => {
        if (!res.data) return;
        const eas = res.data.eas;
        const efs = res.data.efs;

        this.showSplit = res.data.st;
        this.state.meterId = res.data.meterId;
        this.state.meter1 = eas[eas.length - 1].toFixed(2);
        this.state.meter2 = efs[efs.length - 1].toFixed(2);
        this.state.data1 = res.data.vs;
        this.state.data2 = res.data.as;
        this.state.data3 = res.data.pias;
        this.state.data4 = res.data.pfs;
        this.drawChart();
      });
    },
    clearTimer() {
      clearInterval(this.timer); // 清除定时器
      this.timer = null;
    },
    switchSplit0() {
      this.oldMeterId = this.state.meterId;
      this.isloading0 = true;
      switchSplitHelp(0);
      setTimeout(() => (this.isloading0 = false), 5000);
    },
    switchSplit1() {
      this.oldMeterId = this.state.meterId;
      this.isloading1 = true;
      switchSplitHelp(1);
      setTimeout(() => (this.isloading1 = false), 5000);
    },
  },
  mounted() {
    this.timerHelper();
  },
  beforeDestroy() {
    this.clearTimer();
  },
  watch: {
    showSplit(nv, ov) {
      if (ov == undefined || this.state.meterId != this.oldMeterId) {
        this.oldMeterId = null;
        return;
      }
      if (nv == 1) {
        this.$message.success("合闸成功!");
        this.isloading1 == false;
      } else if (nv == 0) {
        this.$message.success("分闸成功!");
        this.isloading0 == false;
      }
    },
  },
};
</script>
